<template>
  <up-popup
    :show="receiveRedEnvelopeShow"
    mode="center"
    bgColor="transparent"
    :overlayStyle="{ background: 'rgba(255, 255, 255, 0.6)' }"
    closeOnClickOverlay
    @close="closeMask()"
  >
    <view class="receiveRedEnvelope">
      <view>
        <view class="userInfo">
          <up-avatar
            class="avatar"
            mode="aspectFill"
            :src="redInfo.picture"
            size="50"
          ></up-avatar>
          <view>{{ redInfo.nick_name }}的红包</view>
        </view>
        <view class="remarks">{{
          redInfo.Content.tips || redInfo.Content.remarks
        }}</view>
        <view
          class="open"
          @tap="RedEnvelopeGetFn"
          v-if="!redInfo.Content.stateType"
          :class="{ redOpen: redOpen }"
          >開</view
        >
        <view
          class="look"
          @click="
            closeMask();
            $emit('redDetailsFn', redInfo);
          "
        >
          <view>查看领取详情</view>
        </view>
      </view>
      <view><i @click="receiveRedEnvelopeShow = false"></i></view>
    </view>
  </up-popup>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { RedEnvelopeGet } from "@/api/ImApi";
const emit = defineEmits();
let receiveRedEnvelopeShow = ref<boolean>(false);
let redOpen = ref<boolean>(false);
let redInfo = ref<any>();
const receiveRedEnvelopeFn = (item: any) => {
  console.log(item);
  redOpen.value = false;
  redInfo.value = item;
  receiveRedEnvelopeShow.value = true;
};
// 关闭输入框弹窗
const closeMask = () => {
  receiveRedEnvelopeShow.value = false;
};
const RedEnvelopeGetFn = () => {
  redOpen.value = true;

  RedEnvelopeGet({
    id: redInfo.value.Content.redenvelope_id,
  })
    .then((e) => {
      setTimeout(() => {
        closeMask();
        redOpen.value = false;
        emit("redDetailsFn", redInfo.value);
      }, 1000);
    })
    .catch(() => {
      uni.showToast({ title: "无法领取", icon: "none" });
      redOpen.value = false;
    });
};

defineExpose({
  receiveRedEnvelopeFn,
  closeMask,
});
</script>

<style scoped lang="scss">
@import "../../../static/scss/chat.scss";
</style>
